<template>
	<div class="personal_container">
		<div class="container">
			<div class="top">
				<div class="user">
					<img class="avatar" :src="userInfo.headImg" />
					<div class="info">
						<p class="infoName">{{ userInfo.name }}</p>
						<p class="infoVip">普通用户</p>
					</div>
				</div>
			</div>
			<h3>我的资产</h3>
			<van-row class="myjuan" type="flex" justify="space-around">
				<van-col span="4" class="juan">
					<p class="sjuan">¥0</p>
					<p class="xjuan">余额</p>
				</van-col>
				<van-col span="4" class="juan">
					<p class="sjuan">0</p>
					<p class="xjuan">红包</p>
				</van-col>
				<van-col span="4" class="juan">
					<p class="sjuan">0</p>
					<p class="xjuan">优惠卷</p>
				</van-col>
				<van-col span="4" class="juan">
					<p class="sjuan">0</p>
					<p class="xjuan">积分</p>
				</van-col>
				<van-col span="4" class="juan">
					<p class="sjuan">0</p>
					<p class="xjuan">礼品卡</p>
				</van-col>
			</van-row>
			<van-grid :column-num="3" :gutter="2">
				<van-grid-item icon="orders-o" text="我的订单" />
				<van-grid-item icon="user-circle-o" text="账号管理" to="/order"/>
				<van-grid-item icon="logistics" text="地址管理" to="/addressList"/>
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
				<van-grid-item icon="photo-o" text="文字" />
			</van-grid>
			<div class="bottom">
				<button class="btn" @click="exitLogin">退出登录</button>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import { Dialog } from 'vant'

export default {
	name: 'Personal',
	computed: {
		...mapState({
			userInfo: (state) => state.user.userInfo,
		}),
	},
	methods: {
		exitLogin() {
			Dialog.confirm({
				message: '确定退出登录吗？',
			})
				.then(async () => {
                    // 联系服务器退出登录
					await this.$store.dispatch('userLogout')
                    // 若退出登录成功，则打回登录
                    this.$router.push('/login')
				})
				.catch(() => {
					// on cancel
				})
		},
	},
}
</script>

<style lang="less" scoped>
.personal_container {
	height: 25rem;
	background-color: #eee;
	.container {
		.top {
			width: 100%;
			height: 5rem;
			background-color: rgb(243, 178, 82);
			.user {
				height: 100%;
				margin-left: 0.4rem;
				display: flex;
				align-items: center;
				.avatar {
					width: 2rem;
					height: 2rem;
					border-radius: 50%;
				}
				.info {
					margin-left: 0.4rem;
					.infoName {
						font-size: 0.45rem;
						font-weight: bold;
					}
					.infoVip {
						font-size: 0.4rem;
					}
				}
			}
		}
		h3 {
			height: 1.5rem;
			line-height: 1.5rem;
			font-size: 0.45rem;
			font-weight: 400;
			background: #fff;
			border-bottom: 0.1rem solid #f4f4f4;
			margin: 0;
			padding-left: 0.4rem;
		}
		.myjuan {
			background: #fff;
			border-bottom: 0.1rem solid #f4f4f4;
			.juan {
				text-align: center;
				.sjuan {
					font-size: 0.4rem;
					font-weight: bold;
				}
				.xjuan {
					font-size: 0.35rem;
				}
			}
		}
		.bottom {
			margin-top: 0.3rem;
			.btn {
				width: 100%;
				height: 1.3rem;
				line-height: 1.3rem;
				border: 1px solid #fff;
				background-color: #fff;
				color: #333;
				font-size: 0.45rem;
				text-align: center;
			}
		}
	}
}
</style>
